import React, { Component } from 'react'
import propTypes from 'prop-types'
// 引入antd组件
import {
  List,
  Grid,
  NavBar,
  // WingBlank,
  // WhiteSpace,
  
  // InputItem,
  // TextareaItem,
  // Button
} from 'antd-mobile'

class HeaderSelector extends Component {
  constructor () {
    super()
    // 设置一个inco表示选中的头像，默认为null
 this.state = {
      icon: null
 }
    // 给header组件定义一个头像数组： 数组的成员值是一个对象：Gird组件要使用这个数组，对象要有两个属性：text文本  icon图片
    this.headerLIst = []
    for (let i = 1; i < 21; i++) {
      this.headerLIst.push({
        // 网格的单元格的文本
        text: `头像${i}`,
        // icon 是img 的src
        icon: `/images/headers/头像${i}.png`,
      })
    }
  }
   // 声明组件的props类型
  static propTypes = {
    // 声明props 的choseHeader为函数类型 必须设置
    choseHeader: propTypes.func.isRequired
  }
  
  
  render () {
  let {icon} = this.state
    
    return (
      // antd的List组件的 rednerHeader属性的值可以是一个js表达式，  在list头部渲染一个虚拟dom元素
      <List renderHeader={
        // 对icon是否有选择进行判断
        !icon? '请选择头像': (<div>
          已选择头像
          <img src={icon} alt=""/>
        </div>)
      }>
        {/*网格组件 col表示列数*/}
        <Grid data={this.headerLIst}
              columnNum={5}
              onClick={this.handleClickHeader}
        >
        
        </Grid>
      </List>
    )
  }
  
  handleClickHeader =({icon,text}) =>{
    // console.log(value)
  //  改变组件自己的state中选中的icon
   this.setState({
     icon
   })
  //  执行父组件的选择头像的函数
    this.props.choseHeader(text)
  }
  
  
}

export default HeaderSelector